<template>
	<view class="container">
		<!-- 头像部分 包括登录按钮 -->
		<view class="header">
			<image class="avatar" src="/static/city4.jpg" mode="aspectFill">
			</image>
			<view class="welcome-text">{{ welcomeText }}
				<button class="login-btn" @click="handleLogin" v-if="!isLogin">登录
				</button>
				<button class="login-btn" v-else>{{ username }}
				</button>

			</view>
		</view>

		<!-- 顶部标签栏 -->
		<view class="top-tabs">
			<text class="tab-item">关注3</text>
			<view class="divider"></view>
			<text class="tab-item">话题0</text>
		</view>

		<!-- 功能按钮区 -->
		<view class="function-buttons">
			<view class="btn-item" @click="goToCollection">
				<image src="/static/city1.png" class="icon" mode="aspectFill"></image>
				<view class="">

					<text class="btn-text">收藏</text>
				</view>
			</view>
			<view class="btn-item" @click="goToHistory">
				<image src="/static/city2.jpg" class="icon" mode="aspectFill"></image>
				<view class="">
					<text class="btn-text">历史</text>
				</view>

			</view>
			<view class="btn-item" @click="goToSettings">
				<image src="/static/city3.jpg" class="icon" mode="aspectFill"></image>
				<view class="">

					<text class="btn-text">设置</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false, // 登录状态
				username: '', // 用户名（登录后填入）
				welcomeText: '你好，请登录！' // 欢迎语
			}
		},
		onShow() {

			const savedUsername = uni.getStorageSync('username');
			if (savedUsername) {
				this.isLogin = true;
				this.username = savedUsername;
				this.welcomeText = "Hi~,欢迎回来！";
			} else {
				this.isLogin = false;
				this.username = '';
				this.welcomeText = '你好，请登录！';
			}
		},
		methods: {


			handleLogin() {
				uni.navigateTo({
					url: '/pages/LoginPage/LoginPage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},



			goToCollection() {
				console.log('跳转到收藏');
			},
			goToHistory() {
				console.log('跳转到历史');
			},
			goToSettings() {
				console.log('跳转到设置');
			},
			goToLottery() {
				console.log('跳转到抽奖');
			},
			goToPublish() {
				console.log('跳转到发布');
			},
			goToBrowse() {
				console.log('跳转到浏览');
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		padding: 20rpx;
	}

	.header {
		display: flex;
		margin-bottom: 30rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		/* 关键：让图片变成圆形 */
		overflow: hidden;
		/* 确保内容裁剪为圆形 */
	}

	.login-btn {
		background-color: aqua;
		margin-top: 10rpx;
	}

	.welcome-text {
		margin-left: 30rpx;

	}


	/* 顶部标签栏 */
	.top-tabs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		background-color: #333;
		color: #fff;
		font-size: 28rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.tab-item {
		color: #fff;
		margin: auto;
	}

	.divider {
		width: 1px;
		height: 24rpx;
		background-color: #777;
	}

	/* 功能按钮区 */
	.function-buttons {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.btn-item {
		text-align: center;
		padding: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		/* margin-bottom: 10rpx; */
	}

	.btn-text {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	/* 横幅广告 */
	.banner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e74c3c;
		color: #fff;
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.banner-text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.banner-btn {
		background-color: #ff6b35;
		color: white;
		font-size: 26rpx;
		padding: 8rpx 15rpx;
		border-radius: 5rpx;
		margin-left: 10rpx;
	}

	/* 内容区 */
	.content-area {
		text-align: center;
		margin-top: 20rpx;
	}

	.icons-group {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-bottom: 30rpx;
	}

	.icon-big {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.stats-text {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.desc-text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.publish-btn {
		background-color: #e74c3c;
		color: white;
		font-size: 28rpx;
		padding: 12rpx 40rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.goto-text {
		font-size: 24rpx;
		color: #666;
		text-decoration: underline;
	}
</style>




<!-- <template>
	<view class="">

		<view :class="dataclass"></view>
		<view class="">
			<input type="text" v-model="stuForm.formName" />
			<input type="text" v-model="stuForm.formId" />

			<text v-if="kkk=true">55555555</text>
			<text v-if="kkk=false">666666</text>
		</view>
		<view class="" v-for="item in list" :key="item.index">
			{{ item.index }} {{item.name}}
		</view>
		
		 <view :class="crClass" @click="changeClass">
		 	
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataclass: 'classes',
				stuForm: {
					formName: 'ddddd',
					formId: '8888888'
				},
				list: [{
						index: 1,
						name: 'hserwga'
					},
					{
						index: 2,
						name: 'hsghgjfa'
					},
					{
						index: 3,
						name: 'hsfsdfga'
					},
					{
						index: 4,
						name: 'hsgdsgfhja'
					},
				],
				crClass:"start1",
				x:1
				
			}
		},
		methods: {
             changeClass(){
				if(x===1){
					x=1
				}else{
					x=2
				};
				 this.crClass="start"+x
			 }
		}
	}
</script>

<style>
	 
	.start1{
		background-color: black;
		height: 60rpx;
		width: 60rpx;
	}
	.start2{
		background-color: red;
		height: 600rpx;
		width: 600rpx;
	}
</style> -->